<template>
    <div class="animation-list">
        <div class="div-animation">
            <el-button @click="isShowAnimation = true">添加动画</el-button>
            <el-button @click="previewAnimate">预览动画</el-button>
            <div>
                <el-tag
                    v-for="(tag,index) in curComponent.animations"
                    :key="index"
                    closable
                    @close="removeAnimation(index)"
                >
                    {{tag.label}}
                    <i class="cursor el-icon-setting"></i>
                </el-tag>
            </div>
        </div>

        <!-- 选择动画 -->
        <Model v-model="isShowAnimation">
            <el-tabs v-model="animationActiveName">
                <el-tab-pane
                    v-for="item in animationClassData"
                    :key="item.label"
                    :label="item.label"
                    :name="item.label"
                    class="tab-pane"
                >
                    <div
                         v-for="animate in item.children"
                         :ref="animate.value"
                         :key="animate.value"
                         class="animate"
                         @mouseenter="runAnimation(animate)"
                         @click="addAnimation(animate)"
                    >
                         <div>
                             {{animate.label}}
                         </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </Model>
    </div>
</template>
<script>
import runAnimation from "@/utils/runAnimation"
import animationClassData from '@/utils/animationClassData'
import Model from '@/components/Model'
import {mapState} from 'vuex'
import eventBus from "@/utils/eventBus"
export default {
    components:{
        Model
    },
    computed:mapState([
        'curComponent'
    ]),
    data(){
        return{
            isShowAnimation:false,
            animationActiveName:"进入",
            animationClassData,
        }
    },
    methods:{
        addAnimation(animate){
            this.$store.commit("addAnimation",animate)
            this.isShowAnimation = false
        },
        previewAnimate(){
            eventBus.$emit("runAnimation")
        },
        removeAnimation(index){
            this.$store.commit("removeAnimation",index)
            if(!this.curComponent.animations.length){
                eventBus.$emit("stopAnimation")
            }
        },
        async runAnimation(animate){
            if(animate.pending) return

            // 启动动画
            animate.pending = true
            await runAnimation(this.$refs[animate.value][0],[animate])

            // 防止无限触发同一元素的动画
            setTimeout(() => {
                animate.pending = false
            }, 100)  
        }
    }
}
</script>
<style scoped>
.div-animation{
    text-align: center;
}
.div-animation>div{
    margin-top: 20px;
}
.el-tag{
    display: block;
    width: 50%;
    margin: auto;

    margin-bottom: 10px;
}
.tab-pane{
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
}
.animate{
    cursor: pointer;
}
.animate > div{
    display: flex;
    width: 100px;
    height: 60px;
    background: #f5f8fb;
    align-items: center;
    justify-content: center;
    margin: 0 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #333;
    border-radius: 3px;
    user-select: none;
    cursor: pointer;
}
</style>